<template>
<div id="father">
  <div id="mother">
  <div class="tit">
   <i class="el-icon-menu" style="  color: #009688;"></i><b>&nbsp;选择功能模块</b>
  </div>

  <div class="son" @mouseenter="inf()" @mouseleave="inf_hover()" @click="inf_click()" id="son1">
    <i class="el-icon-user-solid"></i><b>个人信息</b>
  </div>

  <div class="son" @mouseenter="ord()" @mouseleave="ord_hover()"  @click="ord_click()" id="son2">
    <i class="el-icon-s-order"></i><b>订单信息</b>
  </div>

  <div class="son" @mouseenter="spa()" @mouseleave="spa_hover()" @click="spa_click()" id="son3">
    <i class="el-icon-s-home"></i><b>去租车</b>
  </div>
</div>
</div>
</template>

<script>
export default {
  name: "Selection_Function",
  data(){
    return{
      real : false
    }
  },
  mounted(){
    this.rel();
  },
  methods:{
    rel(){
      var i = localStorage.getItem("token");
      this.sa.ajax("/e-user/user/realNameDetection/"+i, {
          },
      function(resp){
       this.real= resp.data;
      }.bind(this),
          {type : 'get'}
      )
    },
  inf(){
    var html="<i class='el-icon-user-solid'></i><b>个人信息</b><br/>包含用户信息，钱包，实名认证等功能"
     $("#son1").html(html);
  },
   inf_hover(){
      var html="<i class='el-icon-user-solid'></i><b>个人信息</b>"
      $("#son1").html(html);
    },
    ord(){
      var html="<i class='el-icon-s-order'></i><b>订单信息</b><br/>包含订单查询,删除与支付等功能"
      $("#son2").html(html);
    },
    ord_hover(){
      var html="<i class='el-icon-s-order'></i><b>订单信息</b>"
      $("#son2").html(html);
    },
    spa(){
      var html="<i class='el-icon-s-home'></i><b>去租车</b><br/>包含查看所有车位,车位详细信息等功能"
      $("#son3").html(html);
    },
    spa_hover(){
      var html="<i class='el-icon-s-home'></i><b>去租车</b>"
      $("#son3").html(html);
    },
    spa_click(){
      let token = localStorage.getItem("token");
      this.sa.ajax("/e-user/user/getUserNum/"+token+"/"+3,{},
          function (resp){
            if(resp.data==true) {
              if (this.real == 1) {
                var tab = {
                  id: 'map',
                  name: "去租车",
                  view: () => import('@/sa-view/wmy/map.vue'),
                  // params: {id: 2 - 8}
                };
                this.sa_admin.showTab(tab);
              } else {
                this.sa.error("还未实名认证，请在 个人信息 中完善")
              }
            }else{
              this.sa.error("失败了")
            }
          }.bind(this),
          {type : 'post'}
      )
    },
    ord_click(){
      let token = localStorage.getItem("token");
      this.sa.ajax("/e-user/user/getUserNum/"+token+"/"+3,{},
          function (resp){
            if(resp.data==true) {
              if (this.real == 1) {
                var tab = {
                  id: 'order',
                  name: "订单",
                  view: () => import('@/sa-view/wmy/order.vue'),
                  // params: {id: 2 - 8}
                };
                this.sa_admin.showTab(tab);
              } else {
                this.sa.error("还未实名认证，请在 个人信息 中完善")
              }
            }else{
              this.sa.error("失败了")
            }
          }.bind(this),
          {type : 'post'}
      )
    },
    inf_click(){
       var tab = {
                  id: 'Information',
                  name: "个人中心",
                  view: () => import('@/sa-view/wmy/Information.vue'),
                  // params: {id: 2 - 8}
                };
                this.sa_admin.showTab(tab);
            // var tab = {id: '15-1', name: '订单', view: () => import('@/sa-view/wmy/order.vue'), params: {uid: self.uid} };
						// self.sa_admin.showTab(tab);
    }
  }
}
</script>

<style scoped>
#father{
  background-color: white;
  width: 100%;
  height: 669px;
}
#mother{
  width: 60%;
  margin-left: 20%;
  height: 100%;
  background-color: white;
}
.tit{
  border-top-right-radius: 35px;
  border-bottom-left-radius: 35px;
  border-left: #805322 5px solid;
  border-right: #805322 5px solid;
  margin-top: 6%;
  width: 78.5%;
  margin-left: 10%;
  height: 7%;
  padding-top: 2%;
  background-color: white;
  text-align: center;
  font-size: 210%;
}
.son{
  text-align: center;
  padding-top: 5%;
  font-size: 140%;
  width: 80%;
  margin-top: 2%;
  margin-left: 10%;
  height: 10%;
  color: white;
  background-color: green;
  transition: width2s;
}
.son:hover{
  background-color: #428bca;
  height: 14%;
  border-bottom-right-radius: 70px;
  border-top-left-radius:70px ;
}
</style>
